<template>
	<view class="quotationRecordDetail">
		<uni-card padding="10px 0">
			<!-- <template v-slot:title>
				<uni-list class="header">
					<uni-list-item>
						<template v-slot:header>
							<view class="image-box" v-if="product.image">
								<image :src="product.image"></image>
							</view>
							<view class="image-default-box" v-else>
								<image mode="widthFix" style="width: 40rpx;" src="@/static/image/default.png"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="product-content">
								<view class="product-name">
									{{product.name}}
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</template> -->
			<uni-list :border="false">
				<uni-list-item :border="false" class="title-box">
					<template v-slot:header>
						<view class="title">
							<text>报价详情信息</text>
						</view>
					</template>
				</uni-list-item>
				<uni-table border stripe emptyText="暂无更多数据" v-if="product.lines.length > 0">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="100" align="center">型号</uni-th>
						<uni-th width="100" align="center">数量</uni-th>
						<uni-th width="100" align="center">销售单价</uni-th>
						<uni-th width="100" align="center">销售金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="item in product.lines" :key="item.id">
						<uni-td align="center">{{item.name}}</uni-td>
						<uni-td align="center">
							<text>{{item.product_qty}}</text>
						</uni-td>
						<uni-td align="center">
							<text>{{item.proposed_price_unit}}</text>
						</uni-td>
						<uni-td align="center">
							<text>{{item.proposed_sale_amount}}</text>
						</uni-td>
					</uni-tr>
				</uni-table>
				<quotation-fields :fields="product.fields" :is_customized="is_customized"
					v-if="product.fields && product.fields.length > 0"></quotation-fields>
			</uni-list>
			<view class="btn" @click="toBack">返回</view>
		</uni-card>
		<safe-area></safe-area>
	</view>
</template>

<script>
	import {
		getConfirmedQuotationData,
	} from "@/api/call_kw.js";
	export default {
		data() {
			return {
				id: '',
				product: {
					fields: [],
					lines: [],
				},
				is_customized: false,
			}
		},
		onLoad(options) {
			this.id = options.id || '';
			this.getInfo();
		},
		methods: {
			getInfo() {
				getConfirmedQuotationData({
					id: Number(this.id),
				}).then(res => {
					if (res.data?.result) {
						if (res.data.result.success) {
							this.is_customized = res.data?.result?.datas?.display_type_name === '定制类';
							this.product.fields = res.data.result.order.map(x => {
								x.do_type = 'readonly';
								return x;
							}) || [];
							this.product.lines = res.data.result?.lines.filter(x => x.find?.(x => x.field_name === 'product_qty')
								?.value > 0).map(x => {
								return {
									name: x.find?.(x => x.field_name === 'name')?.value || '',
									product_qty: x.find?.(x => x.field_name === 'product_qty')?.value || 0,
									proposed_price_unit: x.find?.(x => x.field_name === 'proposed_price_unit')?.value?.toFixed(
										2) || 0,
									proposed_sale_amount: x.find?.(x => x.field_name === 'proposed_sale_amount')?.value?.toFixed(
										0) || 0,
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data?.result?.message || '获取失败',
							})
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data?.error?.data?.message || '获取失败',
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统错误',
					})
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				})
			},
			image_base64(photo) {
				return 'data:image/jpeg;base64,' + photo;
			},
			toBack() {
				uni.navigateBack();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.quotationRecordDetail {
		width: 100%;

		/deep/.uni-card {
			margin: 0 !important;
			padding: 0 !important;
		}

		.header {
			/deep/.uni-list-item__container {
				padding: 44rpx !important;
			}

			.image-box {
				width: 130rpx;
				height: 130rpx;

				image {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.image-default-box {
				width: 130rpx;
				height: 130rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $uni-bg-color;

				image {
					width: 36rpx;
				}
			}

			.product-content {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding-left: 30rpx;
				justify-content: center;

				.product-name {
					padding: 6rpx;
					word-break: break-all;
					font-size: 38rpx;
					color: #34353A;
					// margin-bottom: 24rpx;
				}

				// .product-tags {
				// 	width: 100%;
				// 	display: flex;
				// 	flex-wrap: wrap;

				// 	.product-tag-box {
				// 		padding: 6rpx;

				// 		.product-tag {
				// 			padding: 6rpx 16rpx;
				// 			border-radius: 10rpx;
				// 			background-color: #F0F4FE;
				// 			font-size: 24rpx;
				// 			line-height: 1;
				// 			color: #3F7CFB;
				// 		}
				// 	}
				// }
			}
		}

		.title-box {
			/deep/.uni-list-item__container {
				padding-left: 0 !important;
			}

			.title {
				display: flex;
				align-items: center;

				&::before {
					content: '';
					width: 8rpx;
					height: 50rpx;
					border-radius: 4rpx;
					background-color: #3F7CFB;
					margin-right: 36rpx;
					flex-shrink: 0;
				}

				text {
					font-size: 32rpx;
					color: #3F7CFB;
				}
			}
		}

		.product-item {
			/deep/.uni-list-item__content-title {
				font-size: 30rpx !important;
				color: #999 !important;
			}

			/deep/.uni-list-item__extra-text {
				font-size: 32rpx !important;
				color: black !important;
			}
		}

		.amount-item {
			/deep/.uni-list-item__container {
				padding: 36rpx 15px;
			}

			/deep/.uni-list-item__content-title {
				font-size: 30rpx !important;
				color: #3F7CFB !important;
			}

			/deep/.uni-list-item__extra-text {
				font-size: 48rpx !important;
				color: #3F7CFB !important;
			}
		}

		.btn {
			margin: 30rpx auto;
			width: 380rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background-color: #3F7CFB;
			line-height: 80rpx;
			text-align: center;
			color: white;
		}
	}

	/deep/.quotation-fields {
		uni-list {
			.uni-list {
				flex-wrap: wrap;
				flex-direction: row;
			}
		}
	}

	/deep/.uni-table {
		min-width: unset !important;

		.uni-table-td,
		.uni-table-th {
			font-size: 24rpx !important;
		}

		.uni-table-td {
			vertical-align: middle;
		}
	}
</style>